<!--
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
-->
<template>
  <div class="box">
    <h1>演示辅助函数使用</h1>
    <el-button type="primary" size="default" @click="handlePlus(11)">
      按钮
    </el-button>
    <el-button type="primary" size="default" @click="handleMinus"
      >-操作</el-button
    >

    {{ count }}
    <!-- {{ glist }}
    {{ cfylist }} -->
    {{ flist }}
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import { myMapMutations } from "./myvuex";
export default {
  computed: {
    // 单独提取state数据
    // count() {
    //   return this.$store.state.count.num;
    // },
    // glist() {
    //   return this.$store.state.goods.goodsList;
    // },
    // cfylist() {
    //   return this.$store.state.cfy.cfyList;
    // },
    ...mapState({
      count: (state) => state.count.num,
      glist: (state) => state.goods.goodsList,
      cfylist: (state) => state.cfy.cfyList,
    }),
    ...mapGetters({
      flist: "goods/filterList",
    }),
  },
  methods: {
    // handlePlus() {
    //   this.$store.commit('count/increment',11)
    // },
    // ...mapMutations({
    //   handlePlus: "count/increment",
    // }),
    ...myMapMutations({
      handlePlus: "count/increment",
      handleMinus: "count/decrement",
    }),
    ...mapActions({
      initCfy: "cfy/initCfyAction",
    }),
  },
  created() {
    this.initCfy();
  },
};
</script>

<style lang="scss" scoped>
.box {
  height: 500px;
  width: 50%;
  border: 1px solid #333;
}
</style>
